<template>
  <div>
    <div class="frontNav">
      <div class="frontLoog">
        <img src="../../assets/login_logo.png">
      </div>
      <div class="fronMenu">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="3">商品中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">商品中心</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
          <div id="goodsCart" style="float: right;  padding-top: 20px;">
            <span>{{ length }}</span>
            <el-button size="mini" @click="toShopCart()"><i class="fa fa-shopping-cart" aria-hidden="true"
                style="margin-right: 10px;"></i>购物车</el-button>
          </div>
        </el-menu>

      </div>
      <div class="frontUser">
        <div v-if="!user.username" class="outlogin">
          <el-button size="small ">
            <router-link to="/login" style="text-decoration: none">登录</router-link>
          </el-button>
          <el-button size="small ">
            <router-link to="/register" style="text-decoration: none">注册</router-link>
          </el-button>
        </div>
        <div v-else class="outlogin">
          <div style="display:flex; font-size: 12px" class="">
            <el-dropdown  class="showUser">
              
              <div class="userimg">
                <div class="userimg_tu inline_block">
                  <!--  -->
                    <img :src="touxson" alt="">
                  <div class="caidan">
                    <div style="height: 50px;width: 100%;"></div>
                    <div style="width:100%;height: 50px;text-align: center;line-height: 50px;"><h2>{{user.nickname}}</h2></div>
                    <div style="width:100%;color: #9499a0;">
                      <div class="inline_block pingjun bianse">商品收藏</div>
                      <div class="inline_block pingjun bianse">我的足迹</div>
                    </div>
                    <div class="genr">
                      <router-link to="front/changePassword" style="text-decoration: none">
                        <span class="genren"><i class="el-icon-key"></i>修改密码</span>
                      </router-link>
                    </div>
                    <div class="genr">
                      <router-link to="Personal_center" style="text-decoration: none">
                        <span class="genren"><i class="el-icon-user-solid"></i>个人信息</span>
                      </router-link>                    
                    </div>
                    <div class="genr">
                      <span class="genren" style="text-decoration: none" @click="logOut">退出</span>
                    </div>
                  </div>
                </div>
              </div>
              <el-dropdown-menu></el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <!--    子路由-->
    <div class="Views">
      <router-view @shopCount="getShopCount" @faqi="getNewToux"></router-view>
    </div>
  </div>
</template>

<script>


export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Front",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}, //获取用户
      shopcartlist: [],
      length: 0,
      touxson:"",
    };
  },
  created() {
    this.getShopCart();
    this.touxson=this.user.avatarUrl;
  },
  methods: {
    //子传父头像
    getNewToux(val){
      this.touxson=val;
    },
    //获取购物车商品数据
    getShopCart() {
      const userId = this.user.id
      this.$API.getGoodsCart(userId).then(res => {
        this.shopcartlist = res.data
        this.length = this.shopcartlist.length

      })

    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logOut() {
      this.$store.commit("deleteLoaclUser")
      this.$router.push("/login")
    },
    toShopCart() {
      this.$router.push("/shopcart")
    },
    //获取商品数
    getShopCount(val){
    this.length=val
    }
  }
}
</script>

<style scoped lang="less">
#goodsCart {
  position: relative;

  span {
    position: absolute;
    
    bottom: 20px;
    left: -10px;
    font-size: 14px;
  width: 22px;
  height: 22px;
    background-color: red;
    color:white;
    border-radius: 100%;
    text-align: center;
  }
}

.frontNav {
  display: flex;
  height: 61px;
  border-bottom: 1px solid #e6e6e6;
}

.frontLoog {
  width: 400px;
  text-align: center;
}

.fronMenu {
  flex: 1;
}

.frontUser {
  width: 300px;
}

.outlogin {
  line-height: 61px;
}

.Views {
  width: 1500px;
  margin: 0 auto;
  margin-top: 30px;
}
.showUser{
  width: 80px;
  height: 60px;
  cursor: pointer;
  .userimg {
    display: inline-block;
    width: 80px;
    height: 60px;
    position: relative;
    .userimg_tu {
      width: 80px;
      height: 60px;
      img{
      
        background-size: contain;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 4px solid white;
        position: relative;
        left: 40px;
        top: 10px;
        z-index: 2153;
        transition-property: width height;
        transition-duration: 0.3s;
      }

      .caidan{
        display: none;
        position:absolute;
        width: 250px;
        height: 300px;
        top: 65px;
        opacity: 0;
        left: -74px;
        z-index: 2000;
        border-radius: 15px 15px 15px 15px;
        background-color: white ;
        box-shadow:5px 5px 15px #999;
        transition-duration: 0.4s;
        transition-delay: 0.1s;
      }
    }
    .userimg_tu:hover img{
      left: 0px;
      top: 20px;
      width: 100px;
      height: 100px;
    }
    .userimg_tu:hover .caidan{
      display: block;
      top: 70px;
      opacity: 1;
    }
  }
}

.inline_block{
  display: inline-block;
}
.pingjun{
  width:125px;
  text-align: center;
}
.bianse:hover{
color: #00aeec;
}
.genr{
  margin: 0 auto;
  margin-top: 3px;
  width: 200px;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  text-align: center;
  .genren{
    color: #61666D;
  }
}
.genr:hover{
  background-color: #E3E5E7;
}
</style>